<template>
	<view :class="['comp-equip-item',`qlty-${equipDataVolume.qlty}`]"
		:ref="`equip_${equipDataVolume.uid}`"
		@mouseenter.stop="equip_pop(equipDataVolume,'enter')"
		@mouseleave.stop="equip_pop(equipDataVolume,'leave')"
		@click="put_up(equipDataVolume)"
	>
		<image :class="['equip-ico']" :src="`../../static/items/${equipDataVolume.resid}.png`"></image>
		
	</view>
</template>

<script>
	export default {
		name:"comp-equip-item",
		props : {
			equipDataVolume : {
				type:Object,
				default : null
			},
			comparison : {
				type : Boolean,
				default : false
			}
		},
		data() {
			return {
				
			};
		},
		methods : {
			equip_pop(equipDataVolume,method){
				
				
				
				let pop_data = '';
				
				if(method == 'enter'){
					let boundingClientRect = this.$refs[`equip_${equipDataVolume.uid}`].$el.getBoundingClientRect();
					pop_data = {
						equipDataVolume,
						comparison : this.comparison,
						width:boundingClientRect.width,
						x : boundingClientRect.x,
						y : boundingClientRect.y
					}
				}else{
					pop_data = ''
				}
				
				uni.$emit('equip_pop',pop_data)
				
			},
			put_up(){
				
			}
		}
	}
</script>

<style lang="scss">
	.comp-equip-item{
		width:100%;
		height:100%;
		.equip-ico{
			width:100%;
			height:100%;
		}
		@include qlty-bg-color;
		position: relative;
		
	}
	
	
</style>